<template>
  <div class="container">
    <ul class="fly-list">
      <li v-for="(item, index) in items" :key="'listItem' + index">
        <a href="user/home.html" class="fly-avatar">
          <img :src="item.uid.pic" alt="头像裂开了">
        </a>
        <h2>
          <a class="layui-badge">{{item.catalog}}</a>
          <a href="jie/detail.html">{{item.title}}</a>
        </h2>
        <div class="fly-list-info">
          <a href="user/home.html" link>
            <cite>{{item.uid.username}}</cite>
            <!--
            <i class="iconfont icon-renzheng" title="认证信息：XXX"></i>
            -->
            <i class="layui-badge fly-badge-vip" v-if="item.uid.isVip!=='0'">{{'VIP' + item.uid.isVip}}</i>
          </a>
          <span>{{item.created | createTime}}</span>

          <span class="fly-list-kiss layui-hide-xs" title="悬赏飞吻"><i class="iconfont icon-kiss"></i> {{item.fav}}</span>
          <span class="layui-badge fly-badge-accept layui-hide-xs" v-if="item.status==='1'">已结</span>
          <span class="fly-list-nums">
            <i class="iconfont icon-pinglun1" title="回答"></i> {{item.answer}}
          </span>
        </div>
        <div class="fly-list-badge" v-if="item.tags.length > 0">
          <span class="layui-badge" v-for="(tag, index) in item.tags" :key="'tag' + index" :class="tag.class">{{tag.name}}</span>
        </div>
      </li>
    </ul>
    <div style="text-align: center" v-if="isShowMore">
      <div class="laypage-main" v-if="!isEnd">
        <a @click.prevent="more" class="laypage-next">更多求解</a>
      </div>
      <div class="noMore" v-else>没有更多了</div>
    </div>
  </div>
</template>
<script>
import _ from 'lodash';
import moment from 'moment';
// 引入moment的中文包
import 'moment/locale/zh-cn';

export default {
  name: 'ListItem',
  props: {
    list: {
      type: Array,
      default: () => []
    },
    isShowMore: {
      type: Boolean,
      default: true
    },
    isEnd: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      pubURL: 'http://localhost:3000'
    };
  },
  computed: {
    items () {
      _.map(this.list, (item) => {
        item.uid.pic = this.pubURL + item.uid.pic;

        switch (item.catalog) {
          case 'ask':
            item.catalog = '提问';
            break;
          case 'share':
            item.catalog = '分享';
            break;
          case 'discuss':
            item.catalog = '讨论';
            break;
          case 'advise':
            item.catalog = '建议';
            break;
          case 'notice':
            item.catalog = '公告';
            break;
          case 'logs':
            item.catalog = '动态';
            break;
        }
      });
      return this.list;
    }
  },
  filters: {
    // - 七天前显示具体距离时间，大于七天前的文章显示具体的日期时间
    createTime: (date) => {
      if (moment(date).isBefore(moment().subtract(7, 'days'))) {
        return moment(date).format('YYYY-MM-DD');
      } else {
        return moment(date).from(moment());
      }
    }
  },
  methods: {
    more () {
      this.$emit('nextPage');
    }
  }
};
</script>
<style scoped lang="scss">
.noMore {
  padding: 20px;
  color: grey;
  font-size: 12px;
  text-align: center;
}
.laypage-next {
  cursor: pointer;
}
</style>
